<template>
    <el-dialog title="添加身份" v-model="dialogOpen" width="500px">

        <el-form :model="groupItem" :rules="rules" label-width="auto">



            <el-form-item label="身份名称:" prop="name">
                <el-input v-model="groupItem.name" placeholder="请输入身份名称" />
            </el-form-item>



            <el-form-item label="是否开启：" prop="resource">
                <el-radio-group v-model="groupItem.resource">
                    <el-radio :value="1">开启</el-radio>
                    <el-radio :value="0">关闭</el-radio>
                </el-radio-group>
            </el-form-item>



            <el-form-item label="权限：">

              
                <el-tree  value="" style="max-width: 600px" :data="data" show-checkbox />



            </el-form-item>




          














        </el-form>
        <template #footer>
            <el-button @click="dialogOpen = false">取消</el-button>
            <el-button type="primary" @click="dialogOpen = false">提交</el-button>
        </template>

    </el-dialog>








    <!-- 确认，取消 -->


</template>

<script setup lang="ts">
import { reactive } from 'vue';

import { ref } from 'vue';
let dialogOpen = defineModel()
console.log(dialogOpen);
// let dialogOpen=ref(true)

//表单双向数据绑定对象
let groupItem = ref({ id: '', name: '', resource: 1, })


//定义表单验证规则
let rules = reactive({
    name: [
        { required: true, message: '身份名称不能为空', trigger: 'blur' }
    ],


    resource: [
        {
            required: true,
            message: '身份名称不能为空',
            trigger: 'change',
        },
    ],

})


//   const value= ref();



let data = [
    {value:'0',label:'主页'},
    {
        value: '1', label: '用户',
        children: [
            { value: 1 - 1, label: '用户管理' },
            { value: 1 - 2, label: '用户分组' },
        ]
    },
    {
        value: '2', label: '设置',
        children: [
            {
                value: 2 - 1, label: '发货设置',
                children: [
                    { value: 3 - 1, label: '配送员管理' },
                    { value: 3 - 2, label: '权限设置1' },
                ]
            },
            { value: 1 - 2, label: '权限设置',
            children: [
                    { value: 3 - 3, label: '权限设置2' },
                    { value: 3 - 4, label: '角色管理' },
                    { value: 3 - 5, label: '管理员账号' },
                ]
             },
        ]
    },
    { value: '3', label: '商品',
    children: [
                    { value: 3 - 6, label: '商品分类' },
                    { value: 3 - 7, label: '商品管理' },
                  
                ]
    },
    { value: '4', label: '订单',
    children: [
                    { value: 3 - 8, label: '收银订单' },
                 
                  
                ]
    },
]








</script>

<style scoped></style>